import React from 'react';
import './index.less';
import { Select, Form, Input, InputNumber, Radio, DatePicker } from 'antd';
const { Search, TextArea } = Input;

// 表单
const onFinish = (values) => {
  console.log(values);
};

export default function index() {
  return (
    <div className="addMatter">
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          width: '100%',
        }}
        initialValues={{
          remember: true,
          number: '保存后自动生成',
          personnel: '张妍',
          productRole: '自制',
        }}
        onFinish={onFinish}
      >
        <div className="buts">
          <button>保存</button>
          <button className="but">保存并新增</button>
          <button className="but">草稿箱</button>
          <button className="but">导入</button>
        </div>
        <h2>物料清单</h2>
        {/* 基本信息 */}
        <table border="1">
          <thead>
            <tr>
              <td colSpan="4" style={{ height: '35px' }}>
                基本信息
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <span>物料清单主题</span>
                <Form.Item
                  name="theme"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Input
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
              <td>
                <span>物料清单编号</span>
                <Form.Item
                  name="number"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Input
                    disabled
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
              <td>
                <span>制单人员</span>
                <Form.Item
                  name="personnel"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <InputNumber
                    disabled
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
            </tr>
            <tr style={{ height: '50px' }}>
              <td colSpan="4" style={{ height: '20px' }}>
                <span style={{ lineHeight: '50px' }}>备注:</span>
                <Form.Item
                  name="remarks"
                  style={{
                    // width: ' ',
                    display: 'inline-block',
                  }}
                >
                  <TextArea
                    style={{ height: '50px', width: 'calc(100vw - 485px)' }}
                  />
                </Form.Item>
              </td>
            </tr>
          </tbody>
        </table>
        {/* 父件信息 */}
        <table border="1" style={{ marginTop: '20px' }}>
          <thead>
            <tr>
              <td colSpan="4" style={{ height: '35px' }}>
                父件信息
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <span>产品名称</span>
                <Form.Item
                  name="productName"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Search
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
              <td>
                <span>产品编码</span>
                <Form.Item
                  name="productCode"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Input
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
              <td>
                <span>规格型号</span>
                <Form.Item
                  name="specifications"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Input
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
              <td>
                <span>单位</span>
                <Form.Item
                  name="unit"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Input
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
            </tr>
            <tr>
              <td>
                <span>数量</span>
                <Form.Item
                  name="quantity"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <InputNumber
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
              <td>
                <span>产品角色</span>
                <Form.Item
                  name="productRole"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Select style={{ width: 200 }}>
                    <Select.Option value="自制">自制</Select.Option>
                    <Select.Option value="委外">委外</Select.Option>
                  </Select>
                </Form.Item>
              </td>
              <td>
                <span>工艺流程</span>
                <Form.Item
                  name="flowpath"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <Search
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
              <td>
                <span>耗损率(%)</span>
                <Form.Item
                  name="wastage"
                  style={{
                    width: 200,
                    display: 'inline-block',
                  }}
                >
                  <InputNumber
                    style={{
                      display: 'inline-block',
                      marginTop: '1px',
                      width: '200px',
                    }}
                  />
                </Form.Item>
              </td>
            </tr>
          </tbody>
        </table>
        <table border="1" style={{ marginTop: '20px' }}>
          <tr>
            <td colSpan="12" style={{ background: '#fff' }}>
              子件信息
              <button>增行</button>
              <button>删行</button>
              <button>导入</button>
              <button>导入模板</button>
            </td>
          </tr>
          <tr className="one">
            <td>序号</td>
            <td>产品名称</td>
            <td>产品编码</td>
            <td>规格型号</td>
            <td>单位</td>
            <td>产品比例</td>
            <td>数量</td>
            <td>产品角色</td>
            <td>工艺流程</td>
            <td>耗损率(%)</td>
            <td>领料方式</td>
            <td>备注</td>
          </tr>
          <tr>
            <td style={{ textAlign: 'center' }}>1</td>
            <td>
              <Search />
            </td>
            <td>
              <Input />
            </td>
            <td>
              <Input />
            </td>
            <td>
              <Input />
            </td>
            <td>
              <Input />
            </td>
            <td>
              <InputNumber style={{ width: '100%' }} />
            </td>
            <td>
              <Select style={{ width: '100%' }}>
                <Select.Option value="自制">自制</Select.Option>
                <Select.Option value="委外">委外</Select.Option>
                <Select.Option value="外购">外购</Select.Option>
              </Select>
            </td>
            <td>
              <Search />
            </td>
            <td>
              <InputNumber style={{ width: '100%' }} />
            </td>
            <td>
              <Select style={{ width: '100%' }}>
                <Select.Option value="正常领料">正常领料</Select.Option>
                <Select.Option value="倒冲领料">倒冲领料</Select.Option>
              </Select>
            </td>
            <td>
              <Input />
            </td>
          </tr>
        </table>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        ></Form.Item>
      </Form>
      {/* 上传文件表格 */}
      <div className="upload">
        <div className="top">
          <span>附件上传</span>
          <button>批量上传</button>
        </div>
        <hr />
        <div className="upContent">
          <div className="titles">
            <span>文件名称</span>
            <span>文件大小</span>
            <span>上传人</span>
            <span>上传时间</span>
          </div>
          <hr />
          <div style={{ height: '50px' }}></div>
          <hr />
          <div className="big">
            <span>金额大写框:</span>
            <Input style={{ width: '200px' }} />
          </div>
        </div>
      </div>
    </div>
  );
}
